<style>
    .time {
        font-size: 15px;
        font-weight: bold;
    }

    .content {
        padding-left: 10px;
        padding-top:4px;
        padding-bottom: 4px;
        font-size: 13px;
    }
</style>
<template>
    <span>
    <Button @click="showDrawer" type="success" size="small">发票信息</Button>
    <Drawer title="发票信息" :closable="false" placement="right" width="500" v-model="drawerVisible">
    <Timeline>
       <TimelineItem v-for="item in invoiceList">
            <p class="content">发票抬头：{{item.invoiceTitle}}</p>
            <p class="content" v-if="item.invoiceType==1" style="color: #52c41a">发票类型：个人发票</p>
            <p class="content" v-else style="color: #52c41a">发票类型：企业发票</p>
            <p class="content">发票内容：{{item.invoiceBody}}</p>
            <p class="content">开票金额：{{item.invoiceAmount}}</p>
            <p class="content" v-if="item.einvoice==1" style="color: #52c41a">开票方式：电子发票</p>
            <p class="content" v-else style="color: #52c41a">开票方式：纸质发票</p>
            <p class="content">联系电话：{{item.telephone}}</p>
            <p class="content">邮箱：{{item.email}}</p>
            <p class="content">企业税号：{{item.creditCode}}</p>
            <p class="content">邮寄地址：{{item.address}}</p>
            <p class="content">收件人：{{item.consignee}}</p>
            <p class="content">开户行：{{item.bankName}}</p>
            <p class="content">账户：{{item.bankNo}}</p>
            <p class="content" style="color: #52c41a">申请时间：{{item.createTime}}</p>
            <p class="content" v-if="item.invoiceKind==1" style="color: #52c41a">发票种类：普通发票</p>
            <p class="content" v-else style="color: #52c41a">发票种类：专用发票</p>
            <p v-if="item.einvoice==0" class="content">快递公司：
                <Select v-model="item.expressCompany" style="width:200px">
                    <Option v-for="item in companyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </p>
            <p v-if="item.einvoice==0" class="content" >快递单号：
                    <Input v-model="item.expressNo" placeholder="请输入快递单号" style="width: 200px" />
            </p>
            <p class="content" style="color: #52c41a" v-if="item.invoiceStatus == 0">发票状态：<span style="color:red;">待开</span></p>
            <p class="content" style="color: #52c41a" v-else>发票状态：<span>已开</span></p>
            <br>
            <p v-if="item.einvoice==0" class="content">
                <Button type="primary" @click="handelSubmit(item)" :loading="submitLoading" >提交</Button></p>
        </TimelineItem>
    </Timeline>
    </Drawer>
    </span>
</template>
<script>
    import {invoiceList,editInvoice} from "@/api/bus";

    export default {
        name: "invoiceDrawer",
        components: {},

        props: {
            id: ""
        },
        data() {
            return {
                drawerVisible:false,
                submitLoading: false,
                invoiceList: [],
                companyList: [
                    {
                        value: '顺丰',
                        label: '顺丰'
                    },
                    {
                        value: '圆通',
                        label: '圆通'
                    },
                    {
                        value: '中通',
                        label: '中通'
                    },
                    {
                        value: '邮政',
                        label: '邮政'
                    },
                    {
                        value: '京东',
                        label: '京东'
                    },
                    {
                        value: '申通',
                        label: '申通'
                    }
                ],
                expressCompany: "",
                expressNo: ""
            }
        },
        methods: {

            //加载数据
            showDrawer() {
                this.type = 1;
                this.drawerTitle = "发票信息";
                this.drawerVisible = true;
                this.getData();

            },
            getaaa(a){
                alert(a.code);
            },
            handelSubmit(v) {
                this.submitLoading = true;
                v.invoiceStatus = 1
                // 添加 避免编辑后传入id等数据 记得删除
                editInvoice(v).then(res => {
                    this.submitLoading = false;
                    if (res.status === true) {
                        this.$Message.success("更新成功");
                        this.getData();
                        this.drawerVisible = false;
                    }
                });
            },
            getData() {
                this.loading = true;
                invoiceList(this.id).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.invoiceList = res.data;
                    }
                });
            }

        }
    }
</script>